<template>
    <div>
        <header>
            <div class="logo">
                <img src="@/assets/img/read.png" alt="" />
                <h1>每日阅读</h1>
            </div>
            <h3>爱上阅读，改变生活</h3>
        </header>
        <main>
            <div class="nav">
                <div class="user">
                    <div class="user-m">
                        <div class="pic" :style="{ backgroundImage: `url(${userPic})` }"></div>
                        <div class="name">{{ userName ? userName : "" }}</div>
                        <div class="log-out" @click="out">退出登录</div>
                    </div>
                    <p>欢迎登录每日阅读后台管理系统</p>
                </div>
                <ul class="functions">
                    <!-- <li class="item" @click="goTo(0, 'dataReading')" :class="index == 0 ? 'active' : ''">数据阅览</li> -->
                    <li class="item" @click="goTo(1, 'userManagement')" :class="index == 1 ? 'active' : ''">用户管理</li>
                    <li class="item" @click="goTo(2, 'articleManagement')" :class="index == 2 ? 'active' : ''">文章管理</li>
                    <!-- <li class="item" @click="goTo(3, 'commentManagement')" :class="index == 3 ? 'active' : ''">评论管理</li> -->
                    <li class="item" @click="goTo(4, 'publishView')" :class="index == 4 ? 'active' : ''">发布</li>
                    <li class="item" @click="goTo(5, 'revise')" :class="index == 5 ? 'active' : ''">信息编辑</li>
                    <!-- <li class="item" @click="goTo(6, 'productInformation')" :class="index == 6 ? 'active' : ''">产品信息</li> -->
                    <!-- <li class="item" @click="goTo(7, 'technicalSupport')" :class="index == 7 ? 'active' : ''">技术支持</li> -->
                </ul>
            </div>
            <div class="content-wrap">
                <router-view></router-view>
            </div>
        </main>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getUserData } from "../api/index";
import { onMounted } from "vue";
let store = useStore();
let userName = ref("");
let userPic = ref("");
// 从cookie获取用户账号并请求用户所有信息
onMounted(() => {
    let getUser = async () => {
        if (document.cookie) {
            let arr = document.cookie.split("; ");
            let obj = {};
            arr.forEach((item) => {
                let keyName = item.split("=")[0];
                let keyVal = item.split("=")[1];
                obj[keyName] = keyVal;
            });
            console.log(obj);
            console.log(obj.userAccount);
            if (obj.userAccount) {
                console.log(1);
                await axios(getUserData(obj.userAccount)).then(({ data }) => {
                    store.commit("setUserData", data[0]);
                    userName.value = store.state.userData.passname;
                    userPic.value = "http://127.0.0.1:3000/imgs/" + store.state.userData.user_pic;
                });
            } else {
                console.log(2);

                router.push({ name: "loginRegistration" });
                ElMessage.error("请先登录");
            }
        } else {
            router.push({ name: "loginRegistration" });
            ElMessage.error("请先登录");
        }
    };
    getUser();
});
let out = () => {
    document.cookie = "userAccount=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    document.cookie = "autoL=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    router.push({ name: "loginRegistration" });
    ElMessage({
        message: "已退出登录",
        type: "success",
    });
};
let index = ref(0);
let router = useRouter();
let Route = useRoute();
let goTo = (num, name) => {
    index.value = num;
    router.replace({ name });
};
let isActive = () => {
    if (Route.path == "/dataReading") {
        index.value = 0;
    }
    if (Route.path == "/userManagement") {
        index.value = 1;
    }
    if (Route.path == "/articleManagement") {
        index.value = 2;
    }
    if (Route.path == "/commentManagement") {
        index.value = 3;
    }
    if (Route.path == "/publishView") {
        index.value = 4;
    }
    if (Route.path == "/revise") {
        index.value = 5;
    }
    if (Route.path == "/productInformation") {
        index.value = 6;
    }
    if (Route.path == "/technicalSupport") {
        index.value = 7;
    }
};
isActive();
</script>

<style lang="scss" scoped>
@font-face {
    font-family: "clzt";
    src: url("@/assets/fonts/ChaoZiSheJiYingJianFan-Shan\(CHAO-ShadowGBT-Flash\)-2.ttf");
}
header {
    padding: 0.625rem 0;
    font-family: "clzt";
    text-align: center;
    border-bottom: 0.1875rem solid #8076a3;
    .logo {
        display: flex;
        height: 48px;
        align-items: end;
        width: 200px;
        margin: 0 auto;
        img {
            width: 48px;
            height: 48px;
        }
        h1 {
            color: #8076a3;
            font-size: 36px;
            font-weight: 600;
        }
    }
    h3 {
        width: 200px;
        padding-left: 50%;
        font-size: 20px;
    }
}

main {
    display: flex;
    justify-content: space-between;
    .nav {
        width: 300px;
        min-height: 85vh;
        border-radius: 0 5px 5px 0;
        overflow: hidden;
        box-sizing: border-box;
        border-right: #8076a3 0.0625rem solid;
        border-bottom: #8076a3 0.0625rem solid;
        background-color: #8076a3;
        .user {
            font-weight: 600;
            padding: 20px 10px;
            border-bottom: 0.0625rem solid #fff;
            background-color: #8076a3;
            color: #fff;
            .user-m {
                padding-left: 15px;
                display: flex;
                align-items: end;
                position: relative;
                .pic {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-position: center;
                    background-size: cover;
                    background-color: #fff;
                }
                .name {
                    font-size: 24px;
                    padding: 10px;
                }
                .log-out {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    font-size: 10px;
                    cursor: pointer;
                }
            }
            p {
                margin-top: 5px;
                text-align: center;
                font-size: 14px;
            }
        }
        .functions {
            .item {
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
            }
            .active {
                background-color: #fff;
                font-family: "clzt";
                color: #8076a3;
                font-size: 1.125rem;
            }
        }
    }
    .content-wrap {
        width: 1200px;
        padding: 30px 10px 0;
        box-sizing: border-box;
    }
}
</style>
